<template>
	<view class="content">
		<view class="block swiper-block">
			<swiper autoplay="true" indicator-dots="true" indicator-color="#999" indicator-active-color="#fff"
				class="swiper-item">
				<swiper-item :item-id="item.id" v-for="(item,index) in swiperList" :key="item.id" class="bg-item">
					<image :src="item.url" class="bg-img"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="info-block">
			<view class="address-item">
				<view class="address" v-if="info.name">{{info.name}}</view>
				<view class="address" v-else>小区</view>
				<image src="/static/images/home/drop-down.png" class="address-img"></image>
			</view>
			<view class="menu-block">
				<view class="menu-item" v-for="(item) in menuList" :key="item.id"
					@click="menuJump(item.path,item.id,item.title)">
					<image :src="item.icon" class="icon"></image>
					<view class="menu-name">{{item.title}}</view>
				</view>
			</view>
			<view class="notice">
				<view class="title-item">
					<image @click="navigate('/pages/news_list/news_list?id=19&title=便民公示')"
						src="/static/images/home/notice.png" class="notice-img" mode="widthFix"></image>
					<view class="thread"></view>
				</view>
				<view class="notice swiper-item">
					<swiper autoplay="true" class="notice-list" vertical="true" interval="8000">
						<swiper-item v-for="(item,index) in newsList" :key="item.id" :item-id="item.id"
							@click="navigate('/pages/index/detail?id='+item.id)" class="notice-item">
							<view class="news">{{item.title}}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="service-block">
				<view class="service-item" @click="navigate('/pages/housekeeping/housekeeping')">
					<view class="name">家政服务</view>
					<view class="look">去看看</view>
				</view>
				<view class="service-item" @click="navigate('/pages/report/report')">
					<view class="name">报修申请</view>
					<view class="look1">去看看</view>
				</view>
				<view class="service-item" @click="navigateTo()">
					<view class="name">家门口就业</view>
					<view class="look2">去看看</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		showDevelopingTips
	} from '@/util/util.js';
	import {
		getSwiperListApi,
		getPublicListApi,
		houseByDistance
	} from '@/api/home.js'
	import {
		showToast
	} from '@/util/util.js'
	export default {
		data() {
			return {
				swiperList: [{
					id: 1,
					imgUrl: '/static/images/home/banner.png'
				}],
				menuList: [{
						id: 1,
						icon: '/static/images/home/live.png',
						title: '生活缴费',
						path: ''
					},
					{
						id: 9,
						icon: '/static/images/home/conscription.png',
						title: '征兵宣传',
						path: '/pages/news_list/news_list'
					},
					{
						id: 10,
						icon: '/static/images/home/grid.png',
						title: '网格动态',
						path: '/pages/news_list/news_list'
					},
					{
						id: 4,
						icon: '/static/images/home/community.png',
						title: '社区党建',
						path: '/pages/community/index'
					},
					// {
					// 	id: 5,
					// 	icon: '/static/images/home/complaint.png',
					// 	title: '投诉建议',
					// 	path: '/pages/feedback/feedback'
					// },
					{
						id: 5,
						icon: '/static/images/home/representative.png',
						title: '"码"上找代表',
						path: '/pages/representative/representative'
					},
					{
						id: 6,
						icon: '/static/images/home/service.png',
						title: '社区服务',
						path: '/pages/service/service'
					},
					{
						id: 11,
						icon: '/static/images/home/spoofing.png',
						title: '反电诈宣传',
						path: '/pages/news_list/news_list'
					},
					{
						id: 8,
						icon: 'https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/dongbeijiedao/jg.png',
						title: '机构介绍',
						path: '/pages/organization/index'
					}
				],
				newsList: [{
					id: 1,
					title: '东方名都嘉苑因线路维护，于8月12日停电'
				}],
				latitude: '',
				longitude: '',
				info: {
					name: '小区'
				}
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			navigateTo() {
				wx.navigateToMiniProgram({
					appId: 'wxdd76ace6fe61c802'
				})
			},
			menuJump(url, id, title) {
				if (id != 1) {
					if (url) {
						uni.navigateTo({
							url: url + '?title=' + title + '&id=' + id
						})
					} else {
						showDevelopingTips();
					}
				} else {
					wx.navigateToMiniProgram({
						appId: 'wxd2ade0f25a874ee2'
					})
				}
			},
			//onShareAppMessage 分享给朋友
			//onShareTimeline  分享到朋友圈
			// #ifdef MP
			onShareAppMessage: function(res) {
				if (res.from === 'button') {
					// 来自页面内转发按钮
					console.log(res.target)
				}
				return {
					//title: this.list.jobTitle,
					path: '/pages/index/index'
				}
			},
			// #endif
			onShareTimeline(res) {
				let distSource = uni.getStorageSync('distSource');
				if (distSource) {
					return {
						//title: this.list.jobTitle,
						path: '/pages/index/index',
						type: 0,
						query: 'id=' + distSource,
					}
				}
			},
			getSwiperList() {
				uni.showLoading()
				getSwiperListApi({}).then(res => {
					this.swiperList = res || [];
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getNoticeList() {
				uni.showLoading()
				getPublicListApi({
					limit: 4
				}).then(res => {
					this.newsList = res || [];
				}).catch(() => {
					uni.hideLoading()
				})
			},
			canIUse() {
				// wx.startLocationUpdate({
				// 	success: res => {
				// 		wx.onLocationChange(_locationChangeFn)
				// 	},
				// 	fail: err => {
				// 		// 重新获取位置权限
				// 		wx.openSetting({
				// 			success(res) {
				// 				res.authSetting = {
				// 					'scope.userLocation': true
				// 				}
				// 			}
				// 		})
				// 		console.log('startLocationUpdate获取当前位置失败', err)
				// 	},
				// 	complete: msg => {}
				// })
				// let _locationChangeFn = res => {
				// 	this.latitude = res.latitude
				// 	this.longitude = res.longitude
				// 	uni.showLoading()
				houseByDistance({
					longitude: this.$store.getters.position.longitude,
					latitude: this.$store.getters.position.latitude,
				}).then(res => {
					uni.hideLoading()
					this.info = res;
				}).catch(() => {
					uni.hideLoading()
				})
				//}
			},
		},
		onLoad() {
			this.getSwiperList()
			this.getNoticeList()
		},
		onShow() {
			this.canIUse()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		.block.swiper-block {
			height: 650rpx;
			width: 100%;

			.swiper-item {
				width: 100%;
				height: 650rpx;

				.bg-item {
					width: 100%;
					height: 100%;

					.bg-img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.info-block {
			display: flex;
			flex-direction: column;
			background: #fff;
			margin-top: -80rpx;
			border-radius: 60rpx;
			position: relative;
			padding: 30rpx;

			.address-item {
				display: flex;
				flex-direction: row;
				align-items: center;

				.address {
					margin-top: 20rpx;
					font-size: 34rpx;
					color: #BA1519;
					//font-weight: bold;
				}

				.address-img {
					width: 40rpx;
					height: 40rpx;
					margin-top: 20rpx;
					margin-left: 10rpx;
				}
			}

			.menu-block {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;

				.menu-item {
					width: calc((100% - 60rpx) / 4);
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-right: 20rpx;
					align-items: center;

					.icon {
						width: 130rpx;
						height: 130rpx;
						margin-top: 20rpx;
					}

					.menu-name {
						font-size: 26rpx;
						margin-top: 30rpx;
					}
				}

				.menu-item:nth-child(4n) {
					margin-right: 0;
				}
			}

			.notice {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 90rpx;
				align-items: center;
				margin-top: 40rpx;
				background: #FBF3F3;
				border-radius: 16rpx;

				.title-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 5px;

					.notice-img {
						width: 150rpx;
						height: 40rpx;
					}

					.thread {
						margin-left: 20rpx;
						width: 4rpx;
						height: 40rpx;
						border-radius: 4rpx;
						background-image: linear-gradient(#BEC3E0, #BA1519, #BEC3E0);
					}

					.title {
						font-weight: bold;
						font-size: 38rpx;
						//margin-right: 10rpx;

					}

					.text {
						background: #027BFD;
						color: #fff;
						font-size: 40rpx;
						margin-right: 30rpx;

					}
				}

				.notice.swiper-item {
					height: 60rpx;
					//border-left: 1.5px solid #027BFD;
					margin-top: 0;

					.notice-list {
						width: 480rpx;
						height: 60rpx;
						margin-left: 10rpx;

						.notice-item {
							height: 60rpx;
							display: flex;
							align-items: center;

							.news {
								font-size: 28rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}
			}

			.service-block {
				width: 100%;
				height: 100%;
				display: flex;
				margin-top: 30rpx;

				.service-item:nth-child(2n) {
					background-image: url('/static/images/home/repair.png');

				}

				.service-item:nth-child(3n) {
					background-image: url('/static/images/home/family.png');
				}

				.service-item {
					width: calc((100% - 60rpx) / 3);
					//width: 100%;
					height: 200rpx;
					margin-right: 30rpx;
					padding: 20rpx;
					background-image: url('/static/images/home/housekeeping.png');
					background-size: 100% 100%;
					margin-bottom: 20rpx;

					.name {
						font-size: 30rpx;
						font-weight: bold;
					}

					.look {
						width: 100rpx;
						height: 38rpx;
						font-size: 22rpx;
						margin-top: 10rpx;
						background-image: linear-gradient(to right, #FF8606, #FFBF6A);
						border-radius: 30rpx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.look1 {
						width: 100rpx;
						height: 38rpx;
						font-size: 22rpx;
						margin-top: 10rpx;
						background-image: linear-gradient(to right, #03BC8E, #24E4BC);
						border-radius: 30rpx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.look2 {
						width: 100rpx;
						height: 38rpx;
						font-size: 22rpx;
						margin-top: 10rpx;
						background-image: linear-gradient(to right, #3874EF, #9EBEFE);
						border-radius: 30rpx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.service-item:last-child {
					margin-right: 0;
				}
			}
		}
	}
</style>